<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import { getCaptcha, loginSysUser, logout, registerSysUser } from '@/api/system/commons/comons'
import type { Result } from '@/tools/request'
import { Message } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'
import router from '@/router'


//登录表单
const loginForm = reactive({
  form: {
    username: '',
    password: '',
    verifyCode: '',
    verifyUuid: ''
  },
  rules: {
    username: [{ required: true, message: '用户名不能为空' }],
    password: [{ required: true, message: '密码不能为空' }],
    verifyCode: [{ required: true, message: '验证码不能为空' }]
  },
  submit: ({ values, errors }: any) => {
    if (errors) {
      return
    }
    //@ts-ignore
    loginSysUser(loginForm.form).then((resp: Result<any>) => {
      Message.success('登录成功！')
      console.log(resp)
      store.setSysUser(resp.data.sysUser, resp.data.token, resp.data.authority)
      router.push({ path: '/', replace: true })
    }).catch(() => {
      captcha()
    })
  },
  verifyImage: ''
})

const visible = ref(true)

const store = useGlobalStore()
//注册表单
const registerForm = reactive({
  form: {
    username: '',
    password: '',
    passwordRepeat: '',
    nickName: '',
    age: 18,
    phone: '',
    verifyUuid: '',
    verifyCode: ''
  },
  rules: {
    username: [{ required: true, message: '用户名不能为空' }],
    password: [{ required: true, message: '密码不能为空' }],
    passwordRepeat: [{
      validator: (value: any, cb: any) => {
        if (value != registerForm.form.password) {
          cb('重复密码不一致')
        }
        cb()
      }
    }],
    nickName: [{ required: true, message: '用户昵称不能为空' }],
    age: [{ required: true, message: '年龄不能为空' }],
    phone: [{ required: true, message: '手机号不能为空' }],
    verifyCode: [{ required: true, message: '验证码不能为空' }]
  },
  submit: ({ values, errors }: any) => {
    if (errors) {
      return
    }
    //@ts-ignore
    registerSysUser(registerForm.form).catch((resp: Result<any>) => {
      Message.success(resp.msg)
      visible.value = true
    }).catch(() => captcha())
  }
})


const captcha = () => {
  //@ts-ignore
  getCaptcha().then((resp: Result<any>) => {
    loginForm.verifyImage = resp.data.verifyImage
    loginForm.form.verifyUuid = resp.data.verifyUUID
    registerForm.form.verifyUuid = resp.data.verifyUUID
  })
}
captcha()

//退出
onMounted(() => {
  const token = localStorage.getItem('token')
  if (token) {
    logout()
  }
  localStorage.clear()
})
</script>

<template>
  <a-row class="h-100 bg-primary banner">
    <a-col :span="10" class="bg-white h-100">
      <div class="h-100 d-flex flex-column justify-content-center align-items-center">
        <a-row justify="center" v-if="visible" class="w-100">
          <a-col :span="15" class="ms-4">
            <h1 class="mb-4 websiteTitle">Rocc.ink</h1>
          </a-col>
          <a-col :span="15">
            <a-form :model="loginForm.form" :rules="loginForm.rules" auto-label-width @submit="loginForm.submit">
              <a-form-item field="username" validate-trigger="blur" hide-asterisk>
                <a-input v-model="loginForm.form.username">
                  <template #prefix>
                    <IconUser />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item field="password" validate-trigger="blur" hide-asterisk>
                <a-input type="password" v-model="loginForm.form.password">
                  <template #prefix>
                    <IconLock />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item validate-trigger="blur" field="verifyCode" hide-asterisk>
                <div class="w-100 h-100 d-flex">
                  <div class="flex-grow-1">
                    <a-input v-model="loginForm.form.verifyCode">
                      <template #prefix>
                        <IconRobot />
                      </template>
                    </a-input>
                  </div>
                  &nbsp;
                  <img :src="loginForm.verifyImage" alt="" style="width: 120px;height: 31.33px" @click="captcha">
                </div>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" class="w-100">登录</a-button>
              </a-form-item>
            </a-form>
            <span class="text-primary cursor-pointer user-select-none ms-4" @click="visible = !visible" type="text">没有账号？</span>
          </a-col>
        </a-row>
        <a-row justify="center" v-else class="w-100">
          <a-col :span="15" class="ms-4">
            <h1 class="mb-4 websiteTitle">注册账号</h1>
          </a-col>
          <a-col :span="15">
            <a-form :model="registerForm.form" :rules="registerForm.rules"
                    @submit="registerForm.submit">
              <a-form-item field="nickName" validate-trigger="blur" label="昵称" hide-asterisk>
                <a-input v-model="registerForm.form.nickName" />
              </a-form-item>
              <a-form-item field="username" validate-trigger="blur" label="用户名" hide-asterisk>
                <a-input v-model="registerForm.form.username" />
              </a-form-item>
              <a-form-item field="password" validate-trigger="blur" label="密码" hide-asterisk>
                <a-input v-model="registerForm.form.password" />
              </a-form-item>
              <a-form-item field="passwordRepeat" validate-trigger="blur" label="重复密码" hide-asterisk>
                <a-input type="password" v-model="registerForm.form.passwordRepeat" />
              </a-form-item>
              <a-form-item field="age" validate-trigger="blur" label="年龄" hide-asterisk>
                <a-input-number v-model="registerForm.form.age" />
              </a-form-item>
              <a-form-item field="phone" validate-trigger="blur" label="手机号码" hide-asterisk>
                <a-input v-model="registerForm.form.phone" />
              </a-form-item>
              <a-form-item validate-trigger="blur" field="verifyCode" label="验证码" hide-asterisk>
                <div class="w-100 h-100 d-flex">
                  <div class="flex-grow-1">
                    <a-input v-model="registerForm.form.verifyCode" />
                  </div>
                  &nbsp;
                  <img :src="loginForm.verifyImage" alt="" style="width: 120px;height: 31.33px" @click="captcha">
                </div>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" class="w-100">注册</a-button>
              </a-form-item>
              <a-form-item>
                <span class="text-primary cursor-pointer user-select-none" @click="visible = !visible"
                      type="text">已有账号？</span>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
    </a-col>
    <a-col :span="14" class="h-100">
      <div class="h-100 d-flex justify-content-center align-items-center rightContainer">
      </div>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.websiteTitle {
  font-weight: 800;
}

.rightContainer {
  background-image: url('@/assets/rzjs.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>
